<template>
  <div>
    <el-dialog
      title="用户授权"
      :visible="userRoleDialog.dialogVisible"
      width="30%"
    >
      <el-row>
        <el-col :span="4"> 用户名 </el-col>
        <el-col :span="16">
          <el-input v-model="userRoleDialog.user.username" :disabled="true">
          </el-input>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="4">权限列表</el-col>
        <el-col :span="20">
          <el-checkbox
            :indeterminate="userRoleDialog.isIndeterminate"
            v-model="userRoleDialog.checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0"></div>
          <el-checkbox-group
            v-model="selectRoles"
            @change="handleCheckedRolesChange"
          >
            <el-checkbox
              v-for="role in userRoleDialog.roles"
              :label="role"
              :key="role.id"
              :checked="role.isSelect"
              >{{ role.roleName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-col>
      </el-row>
      <span slot="footer">
        <el-button @click="colseDialog">取 消</el-button>
        <el-button type="primary" @click="submitUserRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { userGrant } from "@/api/user/user";

export default {
  name: "",
  components: {},
  props: ["userRoleDialog"],
  data() {
    return {
      userId: 0,
      selectRoles: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    colseDialog() {
      this.userRoleDialog.dialogVisible = false;
    },
    submitUserRole() {
      this.userId = this.userRoleDialog.user.id;
      let data = [];
      this.selectRoles.forEach((role) => {
        let s = {
          roleId: role.id,
          userId: this.userId,
        };
        data.push(s);
      });
      userGrant(this.userId, data).then((res) => {
        if (res) {
          this.$message.success("授权成功");
        } else {
          this.$message.error("授权失败");
        }
      });
      this.userRoleDialog.dialogVisible = false;
    },
    handleCheckAllChange(val) {
      if (val) {
        this.selectRoles = this.userRoleDialog.roles;
        this.userRoleDialog.isIndeterminate = false;
      } else {
        this.selectRoles = [];
        this.userRoleDialog.isIndeterminate = true;
      }
    },
    handleCheckedRolesChange(value) {
      console.log(value);
      if (value.length == this.userRoleDialog.roles.length) {
        this.userRoleDialog.checkAll = true;
        this.userRoleDialog.isIndeterminate = false;
      } else {
        this.userRoleDialog.checkAll = false;
        this.userRoleDialog.isIndeterminate = true;
      }
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style scoped>
</style>